<template>
	<div v-if="routerView" class="app-main-container">
		<vab-github-corner />
		<!-- <transition mode="out-in" name="fade-transform" :appear="false" :duration="{ enter: 0, leave: 0 }"> -->
		<keep-alive :include="cachedRoutes" :max="keepAliveMaxNum">
			<router-view :key="key" class="app-main-height" />
		</keep-alive>
		<!-- </transition> -->
		<footer v-if="footerCopyright" class="footer-copyright">
			Copyright
			<vab-remix-icon icon="copyright-fill" />
			{{ copyright }} {{ fullYear }}
		</footer>
	</div>
</template>

<script>
	import VabGithubCorner from "@/pages/common/zxlayout/VabGithubCorner.vue";
	import common from "@/common/common.js";

	export default {
		name: "VabAppMain",
		components: {
			VabGithubCorner,
		},
		data() {
			return {
				show: false,
				fullYear: new Date().getFullYear(),
				copyright: this.$store.state.compnay,
				title: this.$store.state.projectName,
				keepAliveMaxNum: 99,
				routerView: true,
				footerCopyright: false,
			};
		},
		computed: {
			visitedRoutes() {
				return this.$store.state.tabsBar.visitedRoutes;
			},
			device() {
				return this.$store.state.settings.device;
			},
			cachedRoutes() {
				const cachedRoutesArr = [];
				this.visitedRoutes.forEach((item) => {
					if (!item.meta.noKeepAlive) {
						cachedRoutesArr.push(item.name);
					}
				});
				return cachedRoutesArr;
			},
			key() {
				return this.$route.path;
			},
		},
		watch: {
			$route: {
				handler(route) {
					if ("mobile" === this.device) this.foldSideBar();
				},
				immediate: true,
			},
		},
		created() {
			window.vabAppMain = this;
			//重载所有路由
			common.getApp().$on("reload-router-view", () => {
				this.routerView = false;
				this.$nextTick(() => {
					this.routerView = true;
				});
			});

			//重新设置右边滚动条
			this.$nextTick(() => {
				this.$nextTick(() => {
					this.initHeight();
				});
			});
			window.onorientationchange = () => {
				setTimeout(() => {
					this.initHeight();
				}, 500);
			};

		},
		mounted() {},
		methods: {
			foldSideBar: function() {
				this.$store.dispatch("foldSideBar");
			},
			initHeight() {
				var list = document.getElementsByClassName("fixed-header");
				if (list.length == 0) return;
				var headerHeight = list[0].offsetHeight;
				var height = window.innerHeight - headerHeight - 22; //12
				// window.$el = this.$el;
				//console.log(this.$el.offsetHeight, this.$el.style.height, headerHeight, height);
				this.$el.style.height = height + "px";
				this.$el.style.overflow = "auto";

			}
		},
	};
</script>

<style lang="scss" scoped>
	@import "@/css/variables.scss";

	.app-main-container {
		position: relative;
		width: 100%;
		overflow: hidden;

		.vab-keel {
			margin: $base-padding;
		}

		.app-main-height {
			min-height: $base-app-main-height;
		}

		.footer-copyright {
			min-height: 55px;
			line-height: 55px;
			color: rgba(0, 0, 0, 0.45);
			text-align: center;
			border-top: 1px dashed $base-border-color;
		}
	}
</style>
